<template>
	<view class="content setPadding">
		<ba-tree-picker ref="treePicker" :multiple='false' @select-change="selectChange" title="选择城市"
			:localdata="filterPlaceData" valueKey="value" textKey="name" childrenKey="submenu" />
		<!-- <u-transition :show="true" mode="slide-down" duration="1000"> -->
			<!-- 搜索框 -->
			<view @click="toFindSearch()">
				<u-search :show-action="false" input-align="center" height="70" shape="square" :clearabled="true"
					v-model="keyword"></u-search>
			</view>
			<view class="setBg">
				<!-- 热搜栏 -->
				<view class="setVerticalCenter" style="width: 100%;height: 80rpx;line-height: 80rpx;">
					<uni-icons type="fire-filled" color="#ff2828"></uni-icons>
					<text class="setNowrap1 setFont " style="font-size: 30rpx;color: #fc592d;">热榜</text>
					<view class="setNowrap2" style="width: 80%;box-sizing: border-box;padding:0 15rpx;">
						<u-tabs @click="tabsClick" :list="list4" lineWidth="20" lineHeight="7" lineColor="#fff"
							:activeStyle="{
						        color: '#303133',
								fontSize:'30rpx'
						    }" :inactiveStyle="{
						        color: '#606266',
						        transform: 'scale(1)',
								fontSize:'30rpx'
						    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
						</u-tabs>
					</view>

					<text @click="toSearch" class="setNowrap1 iconfont iconoperation"
						style="font-size: 40rpx;color: #fc592d;"></text>
				</view>
				<!-- 五个查询分类 -->
				<view class="classfiy">
					<view @click="checkEnterprise(index)" style="" class="type  setVertical sethorizontalaround"
						v-for="(item,index) in classfiyList" :key="index">
						<text :class=" item.class" style="font-size: 50rpx;"></text>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class=" setRadius ">
				<view class=" hot" @click="toFindSearch()">
					<!-- more-icon="'true'" -->
					<u-notice-bar fontSize="24" :text="list" bgColor='#dbf1e1' color='#19be6b' mode="link">
					</u-notice-bar>
				</view>
			</view>

			<view class="setBg" style="margin-top: 0rpx !important;">
				<!-- 分段查询 -->
				<view class="subsection">
					<!-- 分段头 -->
					<!-- 	<view class="subhead">
		      			<view @click="swichBg(1)" class="subheadText">
		      				<view class="textbox">
		      					<view >新中标企业</view>
		      					<view @click="moreItem(1)" class="">
		      						<u-icon  name="arrow-right-double"></u-icon>
		      					</view>
		      				</view>
		      				<view v-if="subheadBg" class="swichbgStyly">
		      	
		      				</view>
		      			</view>
		      			<view @click="swichBg(2)" class="subheadText">
		      				<view class="textbox">
		      					<view>新中标项目经理</view>
		      					<view @click="moreItem(2)" class="">
		      						<u-icon  name="arrow-right-double"></u-icon>
		      					</view>
		      				</view>
		      				<view v-if="!subheadBg" class="swichbgStyly">
		      	
		      				</view>
		      			</view>
		      	
		      	
		      		</view> -->
					<!-- 展示内容 -->
					<view class="subbody">
						<view class="sethorizontalbetween setVerticalCenter ">
							<text class="setFont">新中标单位</text>
							<div class="setVerticalCenter" @click="showPicker()">
								<text style="font-size: 25rpx;">{{placeName}}</text>
								<uni-icons type="location-filled" size="20"></uni-icons>

							</div>
						</view>
						<u-line color="#19be6b"></u-line>
						<view v-if="subheadBg" class="enterprise ">
							<view class=""
								style="position: absolute;top: 30%;left:50%;transform: translate(-50%,-50%);">
								<u-loading-icon text="加载中" textSize="18" :show="loadShow1"></u-loading-icon>
							</view>
							<company :companyList="allCompany"></company>
							<view v-if="allCompany.length<1" style="position: relative;">
								<u-empty iconSize='120' textSize='30' mode="data">
								</u-empty>
							</view>
							<!-- <noData v-if="" text="暂无相关信息~"></noData> -->
						</view>
						<view v-else class="manager">
							<manager></manager>
						</view>
					</view>
				</view>
			</view>
			<!-- 项目排名 -->
			<view class="rank">
				<view class="rankHead">
					<view class=" rankheadStyle sethorizontalbetween setPadding">
						<view class="setFont setVerticalCenter">
							<text class="iconfont iconchart-bar " style="font-size: 50rpx;"></text>
							<text>企业推荐</text>
						</view>
						<view @click="toMoreRank(0)" class="setVerticalCenter">
							<text>查看更多</text>
							<u-icon name="arrow-right"></u-icon>
						</view>

					</view>

				</view>
				<view class="rankbody">

					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
						<view class="scroll-view-item_H  " v-for="(item,index) in rankList" :key="index" >
							<view  class="rankItem ">
								<view class="rankItemHead sethorizontalbetween">
									<view class="setVerticalCenter ">
										<text class="iconfont iconyeji " style="font-size: 45rpx;"></text>
										<text class="textSize" v-if="index==0" >著名建筑企业</text>
										<text class="textSize" v-else-if="index==1">著名造价企业</text>
										<text class="textSize" v-else-if="index==2" >著名工程设计企业</text>
										<text class="textSize" v-else >著名监理资质企业</text>
									</view>
									<view @click="toMoreRank(index)" class="setVerticalCenter">
										<text>查看更多</text>
										<u-icon color="#fff" name="arrow-right"></u-icon>
									</view>

								</view>

								<view class=" setFontColor2 setOnlyDisplay " style="padding: 0 15rpx;">
									<view @click="toDetailEnterprise(item2)" class="setMarginVertical "
										v-for="(item2,index2) in item" :key="index2">
										<view class="columnItem">
											<view class="nameItem">
												<text class="textStyle" v-if="index2==0"
													style="color: #fc592d;">{{index2+1}}</text>
												<text class="textStyle" v-else-if="index2==1"
													style="color: #fc592d;">{{index2+1}}</text>
												<text class="textStyle" v-else-if="index2==2"
													style="color: #ffb650;">{{index2+1}}</text>
												<text class="textStyle" v-else
													style="color: #00aa8f;">{{index2+1}}</text>
												<text class="" style="font-size: 30rpx;">{{item2.companyName}}</text>
											</view>
										</view>
									</view>
								</view>
								
								<view v-if="item.length<1" class="setPadding" style="position: relative;">
									<u-empty iconSize='120' textSize='30' mode="data">
									</u-empty>
								</view>
							</view>

						</view>


					</scroll-view>

				</view>
			</view>
		<!-- </u-transition> -->

		<u-toast ref="uToast" />
		<zero-loading v-if="loading" type="love" :mask="true"></zero-loading>
	</view>
</template>
<script src="./find.js"></script>



<style lang="scss">
	page {
		background-color: #fff;
	}

	.content {
		.setBg {
			width: 100%;
			height: auto;
			box-sizing: border-box;
			background-color: #ffffff;
			border-radius: 10rpx;

			.hot {
				margin: 25rpx 0;
				color: #19be6b;
				background-color: #dbf1e1;
				box-sizing: border-box;
				padding: 0 10rpx;
			}

			.classfiy {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 100%;
				height: auto;

				.type {
					padding: 5rpx;
					margin: 10rpx 5rpx;
					background-color: #dbf1e1;
					flex: 1;
					width: 20%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #19be6b;
					border-radius: 10rpx;
				}

			}

			.subsection {
				margin: 25rpx 0;

				.subhead {
					display: flex;
					width: 100%;
					height: 80rpx;
					border-radius: 10rpx;
					background-color: #f2f2f2;
					box-sizing: border-box;
					padding: 10rpx;

					.subheadText {
						position: relative;
						background-color: '#ffffff';
						font-weight: '600';

						width: 50%;
						height: 100%;
						color: #505050;
						box-sizing: border-box;
						margin: 0 5rpx;
						display: flex;

						text {
							font-weight: 400;
						}


						.textbox {
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: space-around;
							align-items: center;
							z-index: 2;
						}

						.swichbgStyly {
							width: 100%;
							height: 100%;
							background-color: #ffff;
							z-index: 1;
							position: absolute;
							border-radius: 10rpx;
						}
					}
				}

				.subbody {
					.enterprise {
						font-size: 25rpx;
						color: #82848a;
						margin-bottom: 20rpx;

						.scroll-Y {
							height: 1200rpx;
						}




					}

					.manager {
						box-sizing: border-box;
						margin: 10rpx 0 0;

						width: 100%;
						height: auto;
						padding: 10rpx 20rpx;
						border-radius: 15rpx;

					}
				}
			}
		}


		.rank {
			width: 100%;
			height: auto;
			background: #ffff;

			.rankHead {
				box-sizing: border-box;
				width: 100%;
				height: 100rpx;
				border-bottom: 1rpx solid #19be6b;

				.rankheadStyle {
					padding: 0rpx 20rpx 0 20rpx;
					height: 100%;
					width: 100%;
				}
			}

			.rankbody {
				width: 100%;
				background-color: #ffffff;
				padding-top: 30rpx;
				border-radius: 10rpx;

				.scroll-view_H {
					white-space: nowrap;
					width: 100%;

					.scroll-view-item_H {
						display: inline-block;
						margin-bottom: 80rpx;
						text-align: center;
						font-size: 36rpx;

						.rankItem {
							box-sizing: border-box;
							margin: 0 30rpx 30rpx 0;
							border: 2rpx solid #19be6b;
							border-radius: 15rpx;

							.rankItemHead {
								border-radius: 10rpx 10rpx 0 0;
								padding: 12rpx 20rpx 0 20rpx;
								height: 100rpx;
								background-color: #18b566;
								color: #fff;
								font-size: 25rpx;
								font-weight: 550;
							}
							.textSize{
								font-size: 32rpx;
							}
							.columnItem {
								margin: 0 15rpx;
								display: flex;
								flex-wrap: nowrap;
								height: 520rpx;
								width: 49rpx;
								text-align: start;
								justify-content: center;
								
								.textStyle {
									font-weight: 600;
									writing-mode: horizontal-tb;
								}

								.nameItem {
									writing-mode: vertical-rl;

								}
							}

							.item {
								height: 100rpx;
								width: 100%;
								box-sizing: border-box;
								padding: 20rpx 40rpx;
								border-top: 1rpx solid #eee;
								text-align: left;

								text:nth-child(1) {
									font-weight: 600;
									margin-right: 40rpx;
								}
							}

						}
					}
				}

				.scroll-view-item {
					height: 300rpx;
					line-height: 300rpx;
					text-align: center;
					font-size: 36rpx;
				}
			}
		}

	}
</style>
